<template>
  <div
    class="store-top-three"
    :class="{ ht548: list.length === 2, ht393: list.length === 1 }"
  >
    <img class="top-bg" :src="bgImg" alt="" />
    <div class="top-three-content">
      <ul
        v-if="list.length > 0"
        class="top-three-list"
        :class="{ pt20: list.length < 2 }"
      >
        <li v-for="(item, index) in list" :key="index">
          <div class="brand">
            <div class="brand-logo">
              <img :src="item.brandLogoUrl" alt="" />
            </div>
            <div class="brand-info">
              <div class="brand-name">
                {{ item.brandName }}
              </div>
              <div class="tag-mark">全场{{ item.minPayPrice }}元起</div>
            </div>
          </div>
          <div class="prod-list">
            <div
              v-for="product in item.products"
              :key="product.productId"
              class="prod-item"
            >
              <img :src="product.productLogoUrl" alt="" />
              <div class="prod-mark">￥{{ product.payPrice }}</div>
            </div>
          </div>
        </li>
      </ul>
      <div style="position: relative;">
        <div class="bottom-wrap" :class="{ pt20: list.length < 3 }">
          <div class="bottom-left">
            <div class="store-info">
              <img
                v-if="shopLogoUrl"
                class="avatar"
                :src="shopLogoUrl"
                alt=""
              />
              <img
                v-else
                class="avatar"
                src="@/assets/poster/defaultImg.png"
                alt=""
              />
              <p class="store-name">{{ shopName }}</p>
            </div>
            <img
              class="icon-guide"
              src="../../assets/poster/icon-top-guide.png"
              alt=""
            />
          </div>
          <img class="qr-code" alt="" :src="qrcode" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'TopThreePoster',
  props: {
    list: {
      type: Array,
      default: () => []
    },
    bgImg: {
      type: String,
      default: ''
    },
    qrcode: {
      type: String,
      default: ''
    },
    shopName: {
      type: String,
      default: ''
    },
    shopLogoUrl: {
      type: String,
      default: ''
    }
  },
  data() {
    return {};
  }
};
</script>

<style lang="scss" scoped>
.store-top-three {
  width: 300px;
  height: 587px;
  position: relative;
  &.ht548 {
    height: 454px;
  }
  &.ht393 {
    height: 325px;
  }
  .top-bg {
    width: 100%;
    height: 100%;
  }
  .top-three-content {
    position: absolute;
    left: 0;
    top: 66px;
    z-index: 1;
  }
  .top-three-list {
    width: 268px;
    margin-left: 16px;
    background: #fff;
    border-radius: 10px;
    padding: 12px 0;
    &.pt20 {
      padding: 12px 0 16px;
    }

    li {
      padding: 10px 10px 0 10px;
      &:first-child {
        padding-top: 0;
      }
      .brand {
        display: flex;
        align-items: center;
        margin-bottom: 8px;
      }
      .brand-logo {
        width: 35px;
        height: 35px;
        border-radius: 4px;
        border: 1px solid rgba(51, 51, 51, 0.05);
        box-sizing: border-box;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-right: 8px;
        img {
          width: 32px;
          height: 32px;
          object-fit: cover;
          border-radius: 4px;
          /*border: none;*/
        }
      }
      .brand-name {
        font-size: 14px;
        font-family: PingFangSC-Medium;
        font-weight: 500;
        color: #333;
        margin-bottom: 3px;
      }
      .tag-mark {
        padding: 1px 5px;
        font-size: 11px;
        font-family: PingFangSC-Regular;
        color: #fe4808;
        display: inline-block;
        border: 1px solid rgba(254, 72, 8, 0.3);
        border-radius: 2px;
      }
      .prod-list {
        width: 268px;
        display: flex;
        overflow: hidden;
      }
      .prod-item {
        width: 78px;
        height: 78px;
        position: relative;
        margin-right: 7px;
        img {
          width: 100%;
          height: 100%;
        }
      }
      .prod-mark {
        position: absolute;
        left: 0;
        bottom: -1px;
        width: 48px;
        height: 18px;
        background: linear-gradient(
          90deg,
          rgba(253, 132, 49, 1) 0%,
          rgba(255, 60, 0, 1) 100%
        );
        border-radius: 0 20px 0 2px;
        font-size: 12px;
        font-family: PingFangSC-Regular;
        font-weight: 400;
        color: rgba(255, 255, 255, 1);
        line-height: 10px;
        display: flex;
        align-items: center;
        padding-left: 3px;
        box-sizing: border-box;
      }
    }
  }

  .bottom-wrap {
    padding: 12px 0;
    width: 268px;
    display: flex;
    margin-left: 16px;
    justify-content: space-between;
    box-sizing: border-box;
    &.pt20 {
      /*padding: 20px 0;*/
    }
    .store-info {
      height: 45px;
      margin-top: 5px;
      display: flex;
      align-items: center;
      .avatar {
        width: 45px;
        height: 45px;
        border-radius: 50%;
        display: block;
        border: none;
      }
      .store-name {
        font-size: 16px;
        font-family: PingFangSC-Medium;
        font-weight: 500;
        color: #fff;
        line-height: 22px;
        margin-left: 8px;
      }
    }
    .icon-guide {
      width: 172px;
      height: 25px;
      margin-top: 11px;
    }
    .qr-code {
      width: 86px;
      height: 86px;
      /*border: none;*/
      /*display: block;*/
    }
  }
}
</style>
